<template>
  <div class="container">
    <CarouselBanner />
    <div class="machine-size">
      <HomeMachine2 
      v-for="item in hotMachine" 
      :key="item.categoryId"
      :message="item"
      />
    </div>
  </div>
</template>

<script>
import CarouselBanner from "@/components/CarouselBanner.vue";
import HomeMachine2 from "@/components/HomeMachine2.vue";
import { getHomeHot } from "../api/home";

export default {
  name: "HomePage",
  data() {
    return {
      hotMachine: null,
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      getHomeHot()
        .then((res) => {
          this.hotMachine = res.rows;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  components: { CarouselBanner, HomeMachine2 },
};
</script>

<style lang="scss" scoped>
.machine-size {
  width: 100%;
  height: 2076px;
  margin: 0 auto;
  background-image: url("../assets/Blank.png");
}
</style>
